<template>
  <div class="wraper">
    <h1 ref="title">我是Person组件</h1>
    <h2>名字：{{name}}</h2>
    <h2>年龄：{{age}}</h2>
    <button @click="showPerson">点我展示人员信息</button>
  </div>
</template>

<script>
   export default {
    name: "Person",
    data() {
      return {
        name: "tony",
        age: 18,
      }
    },
    methods: {
      showPerson() {
        console.log(this);
        alert(`我叫${this.name}，今天我${this.age}岁了`);
      },
    },
  };
</script>

<style scoped>
  .wraper {
    background-color: orange;
    padding: 20px;
    box-shadow: 0 0 10px black;
  }
</style>